<template>
    <el-upload
        v-model:file-list="fileList"
        accept=".cer,.pfx"
        ref="uploadRef"
        :action="action"
        :limit="1"
        :on-exceed="handleExceed"
        :on-success="successHandler"
        :on-error="errorHandler"
        :before-upload="beforeUploadHandler">
        <el-button type="primary" size="default">点击上传</el-button>
        <!-- <template #tip>
            <div class="el-upload__tip">只支持 cer、pfx 格式文件，大小不能超过 1M</div>
        </template> -->
        <template v-slot:file="{ file }">
            <div class="zw-upload-list">
                <div class="zw-upload-list-file">
                    <span class="file-name">{{ file.name }}</span>
                </div>
                <div class="zw-upload-list-del" @click="handleRemove">
                    <el-icon :size="14"><Close /></el-icon>
                </div>
            </div>
        </template>
    </el-upload>
</template>
<script setup>
import { ref, computed } from 'vue';
import { genFileId } from 'element-plus';
import { ZwMessage } from '@/commons';
import { isNotEmpty } from '../commons/utils';

const props = defineProps({
    modelValue: String
});
const emit = defineEmits(['change']);
const uploadRef = ref(null);

/**
 * 显示上传后的文件地址
 */
const fileList = computed(() => {
    const name = props.modelValue;
    if (isNotEmpty(name)) {
        return [{ name }];
    } else {
        return [];
    }
});

/**
 * 传文件地址
 */
let fileUploadUrl = '';
if (import.meta.env.VITE_RUNTIME_ENV === 'local') {
    fileUploadUrl = '/zwapi/admin/oss/upload/file';
} else {
    fileUploadUrl = import.meta.env.VITE_BASE_API_URL + '/admin/oss/upload/file';
}
const action = ref(fileUploadUrl);

/**
 * 文件规则校验
 * @param {*} file
 */
const beforeUploadHandler = file => {
    const isTypeRight = file.type.includes('x-x509-ca-cert') || file.type.includes('x-pkcs12');
    const isLimitRight = file.size / 1024 / 1024 < 1;
    if (!isTypeRight) {
        ZwMessage.error('只支持 cer 和 pfx 格式的文件!');
    }
    if (!isLimitRight) {
        ZwMessage.error('文件大小不能超过 1MB !');
    }
    return isTypeRight && isLimitRight;
};

/**
 * 移除文件
 */
const handleRemove = () => {
    uploadRef.value.clearFiles();
    emit('change', '');
};

/**
 * 上传成功回调
 * @param {*} res
 */
const successHandler = res => {
    const {
        code,
        data: { url },
        msg
    } = res;
    if (code === 0) {
        emit('change', url);
    } else {
        const name = fileList.value[0].name;
        ZwMessage.error(`【${name}】${res.msg}`);
        uploadRef.value.clearFiles();
    }
};

/**
 * 上传失败回调
 * @param {*} res
 */
const errorHandler = res => {
    ZwMessage.error('文件上传失败，请重试!');
};

/**
 * 上传超出限制时的回调
 */
const handleExceed = () => {
    uploadRef.value.clearFiles();
    const file = fileList.value[0];
    file.uid = genFileId();
    uploadRef.value.handleStart(file);
};
</script>
<style lang="scss" scoped>
:deep(.el-upload__tip) {
    margin: 0;
    line-height: 20px;
}
:deep(.el-upload-list--text) {
    margin: 0;
}
.zw-upload-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    &-file {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        line-height: 20px;

        .file-name:hover {
            color: #ff6b00;
        }
    }

    &-del {
        width: 40px;
        height: 100%;
        cursor: pointer;
        text-align: center;

        &:hover {
            color: #ff6b00;
        }
    }
}
</style>
